import { ITouchEvent, Text, View } from '@tarojs/components';
import Tag, { Props as TagProps } from '../Tag';
import styles from './style.scss';
import { ReactNode } from 'react';

type Props = {
  className?: string;
  title?: ReactNode;
  tag?: TagProps;
  onClick?: (event: ITouchEvent) => void;
  right?: ReactNode;
  border?: boolean;
  left?: ReactNode;
};

export default (props: Props) => {
  const { className = '', title, tag, onClick, right, border, left } = props;
  return (
    <View
      className={`${styles.cell} ${className} ${border ? styles.border : ''} `}
    >
      {left}
      <View className={styles.left} onClick={onClick}>
        {title && <Text className={styles.title}>{title}</Text>}
        {tag && <Tag {...tag} />}
      </View>
      {right}
    </View>
  );
};
